<template>
	<view>
		<view style="background-color: #fff;padding: 20rpx;display: flex;align-items: center;">
			<view class="input">
				<input v-model="formData.uname" type="text" style="flex: 1;" placeholder="请输入子账名">
			</view>
			<view class="input">
				<input v-model="formData.userLoginId" type="text" style="margin-left:5px;flex: 1;" placeholder="请输入登录名">
			</view>
			<u-button @click="getList(formData)" :customStyle="addBtn" shape="circle" text="搜索"></u-button>
		</view>
		<view class="btn1">
			<button @tap="skip('/pages/accountManagement/add')">添加</button>
		</view>


		<view class="product_list">
			<view class="product_list_item" @longpress="goDetails(item)" v-for="(item, index) in list" :key="index">
				<view class="name">{{item.uname}}-【{{item.userLoginId}}】</view>
				<view class="product_list_item_btn">
					<button @click="goAuth(item)">
						权限
					</button>
					<button v-if="item.stt != 2" @click="freeze(item.uid,item)">
						冻结
					</button>
					<button v-else @click="openUser(item.uid,item)">
						解冻
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addBtn: {
					textIndent: 0,
					// padding: 20rpx,
					backgroundColor: 'red',
					color: ' #fff',
					width: 'auto',
					marginLeft: ' 20 rpx',
					// height: auto,
					boxSizing: 'border - box',
				},

				formData: {
					pageNo: 1,
					pageSize: 50,
					userName: ""
				},
				list: []
			}
		},
		onReachBottom() {
			this.formData.pageNo++
			this.getList(this.formData)
		},
		async onShow() {
			this.formData.pageNo = 1
			await this.getList(this.formData)
		},
		methods: {
			async openUser(appUid, item) {
				let data = await this.$api.openUserApi({
					appUid
				})
				item.stt = "1"
				uni.showToast({
					title: "操作成功",
					icon: "none"
				})
			},
			goAuth(item) {
				uni.$u.route('/pages/accountManagement/auth', {
					uid: item.uid,
					userMenu: item.userMenu,
					userRight: item.userRight
				});
			},
			goDetails(item) {
				this.$store.state.accountManagement.info = item
				uni.navigateTo({
					url: "/pages/accountManagement/details"
				})
			},
			async freeze(appUid, item) {
				let data = await this.$api.closeUserApi({
					appUid
				})
				item.stt = "2"
				uni.showToast({
					title: "操作成功",
					icon: "none"
				})
			},
			async getList(formData = {}) {

				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null) {
						delete requestData[item]
					}
				});
				let data = await this.$api.appUserListApi(requestData)

				if (data.code == 200) {
					this.list = requestData.pageNo == 1 ? data.result.list : this.list.concat(data.result.list)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn1 {
		display: flex;
		padding: 0rpx 40rpx;
		margin-top: 20rpx;

		button {
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 28rpx;
			background-color: #fe3430;
			color: #fff;
			margin: 0 10rpx 0 0;
		}
	}


	.input {
		display: flex;
		align-items: center;
		color: #000;
		flex: 1;

		input {
			padding: 0 20rpx;
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
			width: 100%;
		}
	}

	.product_list {
		margin-top: 18rpx;
		padding: 0 30rpx;

		.product_list_item {
			width: 100%;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 5rpx;

			.product_list_item_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.u-switch {
					margin-right: 43rpx;
				}

				button {
					width: 124rpx;
					height: 48.5rpx;
				}

				.Reconciliation {
					margin-left: 18rpx;
				}
			}

			.name {
				font-weight: 600;
			}

			button {
				margin: 0;
				color: #fff;
				width: 124rpx;
				line-height: 48rpx;
				height: 48rpx;
				background: #fe3430;
				border-radius: 24rpx;
			}

			img {
				width: 12rpx;
				height: 24rpx;
			}

			.price {
				color: #bdbdbd;
			}
		}
	}
</style>